<template>
  <div class="main">
    <div class="heade tanxing">
      <div class="pic"><img :src="playlist.coverImgUrl" alt="" /></div>
      <div class="desc">
        <h3>{{ playlist.name }}</h3>
        <div class="time">
          <i></i><span>{{ playlist.description }}</span>
        </div>
        <ul class="tanxing">
          <li class="tanxing">
            <div class="bofang">播放</div>
            <div class="jia">＋</div>
          </li>
          <li>({{ playlist.subscribedCount }}) <span></span></li>
          <li>({{ playlist.shareCount }}) <span></span></li>
          <li>下载 <span></span></li>
          <li>({{ playlist.commentCount }})<span></span></li>
        </ul>
      </div>
    </div>
    <div class="music_list">
      <div class="title tanxing">
        <h3>歌曲列表<span>200首歌</span></h3>
        <div class="t_r">播放：<span>xxxxxxxxxxxx</span>次</div>
      </div>
      <MusicList :MusicList="tracks" />
    </div>
    <div class="music_list pinglun">
      <div class="title tanxing">
        <h3>
          评论<span><span>共26336655</span>条评论</span>
        </h3>
      </div>
      <div class="speak">
        <img src="../assets/hander.jpg" alt="" />
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="评论"
        ></textarea>
      </div>
      <div class="btn tanxing">
        <ul>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
        </ul>
        <div>140<span>评论</span></div>
      </div>
      <Pinglunlist :Pinlun="subscribers" />
    </div>
  </div>
</template>

<script>
import MusicList from '@/components/MusicList.vue';
import Pinglunlist from '@/components/Pinglunlist.vue';
import { XiangqingApi } from '@/request/api'
export default {
  data() {
    return {
      tracks: [],
      playlist: {},
      subscribers: []


    }
  },
  components: {
    MusicList,
    Pinglunlist
  },

  created() {
    XiangqingApi(this.$store.state.idObj.id).then(res => {
      // this.$router.go(0);
      console.log(res);
      if (res.data.code === 200) {
        this.playlist = res.data.playlist
        this.tracks = res.data.playlist.tracks
        this.subscribers = res.data.playlist.subscribers
      }
      // console.log(this.playlist);
      console.log(this.tracks);
    })
  }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.main {
  width: 740px;
  padding: 40px;
  border-right: 1px solid #ccc;
  .heade {
    .pic {
      width: 160px;
      height: 160px;
      box-sizing: border-box;
      padding: 2px;
      border: 1px solid #ccc;
      img {
        width: 100%;
      }
    }
    .desc {
      h3 {
        line-height: 24px;
        font-size: 20px;
        font-weight: normal;
      }
      .time {
        color: #666;
        margin-left: 5px;
        line-height: 35px;
        margin-bottom: 30px;
        margin-top: 10px;
      }
      ul {
        li {
          display: block;
          height: 31px;
          display: flex;
          padding-left: 30px;
          box-sizing: border-box;
          background: url(../assets/Phonelog.png) no-repeat;
          margin-right: 6px;
          border-radius: 3px;
          cursor: pointer;
          .bofang {
            margin-left: 10px;
            color: #fff;
            line-height: 31px;
          }
          .jia {
            text-align: center;
            width: 31px;
            color: #fff;
            font-size: 20px;
          }
          span {
            background: url(../assets/Phonelog.png) no-repeat;
            display: block;
            width: 5px;
            background-position: right -1020px;
          }
        }
        li:nth-of-type(1) {
          width: 97px;
          background-position: 1px -633px;
        }
        li:nth-of-type(2) {
          background-position: 1px -977px;
          font-family: "宋体";
          line-height: 31px;
        }
        li:nth-of-type(3) {
          background-position: 1px -1225px;
          font-family: "宋体";
          line-height: 31px;
        }
        li:nth-of-type(4) {
          background-position: 1px -2761px;
          font-family: "宋体";
          line-height: 31px;
        }
        li:nth-of-type(5) {
          background-position: 1px -1465px;
          font-family: "宋体";
          line-height: 31px;
        }
      }
    }
  }
}
.music_list {
  .title {
    margin: 50px 0 10px 0;
    h3 {
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      span {
        margin: 9px 0 0 20px;
        color: #666;
        font-size: 12px;
      }
    }
    .t_r {
      color: #666;
      span {
        color: #c20c0c;
        font-weight: bold;
      }
    }
  }
}
.pinglun {
  .title {
    border-bottom: 2px solid #c20c02;
  }
  .speak {
    img {
      float: left;
      width: 50px;
      height: 50px;
      margin-top: 10px;
      margin-right: 15px;
    }
    textarea {
      height: 60px;
      width: calc(100% - 65px);
      margin-top: 10px;
      resize: none;
      padding: 5px 6px 6px;
      border: 1px solid #cdcdcd;
      border-radius: 2px;
      line-height: 19px;
      box-sizing: border-box;
      &:focus {
        outline: none;
      }
    }
  }
  .btn {
    ul {
      width: 70px;
      display: inline-block;
      overflow: hidden;
      margin-top: 10px;
      margin-left: 65px;
      li {
        float: left;
        margin-right: 10px;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        background: url(../assets/icon.png) no-repeat;
        &:nth-of-type(1) {
          background-position: -40px -490px;
          cursor: pointer;
        }
        &:nth-of-type(2) {
          background-position: -60px -490px;
          cursor: pointer;
        }
      }
    }
    div {
      margin-top: 10px;
      color: #999999;
      cursor: pointer;
      span {
        display: inline-block;
        color: #fff;
        background: url(../assets/button.png) no-repeat;
        width: 46px;
        height: 25px;
        background-position: -84px -64px;
        text-align: center;
        line-height: 25px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>